<template>
  <div>
    <img class="loading" v-if="loading" src="../../../public/img/loading/1.gif" alt>
    <div v-if="!loading">
      <home-head></home-head>
      <home-swiper :swiperList="swiperList"></home-swiper>
      <home-icons :icons="icons"></home-icons>
      <p class="title">热销推荐</p>
      <recommend :recommendList="recommendList"></recommend>
      <p class="title">周末去哪儿</p>
      <home-item :weekendList="weekendList"></home-item>
    </div>
  </div>
</template>

<script>
import HomeHead from "./components/Head";
import HomeSwiper from "./components/Swiper";
import { HTTP } from "../../models/HTTP";
import { HomeModel } from "../../models/HomeModel";
const homeModel = new HomeModel();
const http = new HTTP();
import HomeIcons from "./components/HomeIcons";
import Recommend from "./components/Recommend";
import HomeItem from "./components/HomeItem";


export default {
  name: "home",
  components: {
    HomeHead,
    HomeSwiper,
    HomeIcons,
    Recommend,
    HomeItem,
  },
  data() {
    return {
      swiperList: [],
      banner: [],
      icons: [],
      recommendList: [],
      weekendList: [],
      loading: false
    };
  },
  beforeMount() {
    this.loading = true;
  },
  mounted() {
    // console.log(window.devicePixelRatio);
    http
      .request({
        url: "Swiper"
      })
      .then(res => {
        // console.log(res);
        var swiperList = res.data.swiperList;
        this.swiperList = swiperList;
        this.loading = false;
      });

    homeModel.GetHomePage().then(res => {
      var { banner, icons, recommendList, weekendList } = res.data.data;
      this.banner = banner;
      this.icons = icons;
      this.recommendList = recommendList;
      this.weekendList = weekendList;
    });
  }
};
</script>
<style lang="scss">
.loading {
  width: 30%;
  display: block;
  margin-right: auto;
  margin-left: auto;
}
.title {
  font-size: 20px;
  padding: 20px;
  background: #ccc;
}
</style>
